import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { toJS } from 'mobx'
import { observer, inject } from 'mobx-react'
import { Flex, List, WhiteSpace } from 'antd-mobile'
import userImg from 'assets/common/User.jpg'
import './Profile.scss'

@inject('profileStore')
@observer
class Profile extends Component {
  static propTypes = {
    profileStore: PropTypes.object.isRequired,
  };

  state = {

  };

  componentDidMount() {
    this.props.profileStore.getProfile()
  }

  goTo = (href) => {
    stat({
      category: '个人中心',
      action: '点击列表',
      label: href,
      callback() {
        window.location.href = href
      },
    })
  };

  render() {
    const { profileStore } = this.props
    const { mobile } = window.localStorage
    const profileList = toJS(profileStore.profileList)

    return (
      <div>
        <Flex styleName="avaterWrapper">
          <img src={userImg} styleName="avater" alt="" />
          <Flex.Item>
            {mobile ?
              <p styleName="userName">{mobile}</p> : null
            }
          </Flex.Item>
        </Flex>
        <WhiteSpace />
        <List>
          {profileList.map(item => (
            <List.Item
              arrow="horizontal"
              onClick={() => this.goTo(item.link)}
              key={item.id}
            >
              {item.name}
            </List.Item>
          ))}
        </List>
      </div>
    )
  }
}

export default Profile
